﻿@using Rail.Net.Common.Resources
@model Rail.Net.Core.Model.Nonpersistent.Product2Model


@*<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../../Scripts/gmap3.min.js"></script>*@

<div id="mapContent" style="width:860px;">    
    <div id="map" style="width:600px;height:620px;">
    </div>
    <div id="mapLegend" style="width:255px; float: right;">
        <div id="trainsLegend">
            <h1>Trains</h1>
        </div>
        <br/>
        <div id="stationsLegend">
            <h1>Stations</h1>
        </div>
    </div>
</div>
<div style="clear: both;">
</div>
<div>
    <table id="pricesTable" class="dataTable" style="width: 100%;">
            <thead>
                <tr>
                    <th>
                        @Global.Main_Offers_FromStation
                    </th>                               
                    <th>
                        @Global.Main_Offers_ToStation
                    </th>
                    <th>
                        Type
                    </th>
                    <th>
                        @Global.Main_Offers_FreeSeats
                    </th>
                    <th>
                        @Global.MainModel_Traveler @Global.Main_Offers_Price 
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var sequence in Model.Sequences)
                {
                    <tr>
                        <td>
                            @sequence.FromStation.Name (@sequence.FromStation.Eva)
                        </td>
                        <td>
                            @sequence.ToStation.Name (@sequence.ToStation.Eva)
                        </td>
                        <td>
                            @sequence.SegmentType
                        </td>
                        <td>
                            @{
                                var priceSegment = Model.GetPriceSegmentForSequence(sequence);
                                <p>
                                    @if (priceSegment.NumberOfFreeSeats != int.MaxValue)
                                     {
                                         @priceSegment.NumberOfFreeSeats
                                     }
                                     else
                                     {
                                         @Global.Main_Offers_NoLimit
                                     }
                                </p>
                            }
                        </td>
                        <td>
                            @{
                                var i = 0;
                                foreach (var priceProTraveler in priceSegment.PricesProTraveler)
                                {
                                    i++;
                                    var age = priceProTraveler.Traveler.Age.SelectedItem.Value;
                                    var price = priceProTraveler.Price;
                                    
                                    <p>
                                        @Global.MainModel_Traveler: @i
                                        <br/>
                                        @Global.MainModel_Traveler_Age: @age
                                        <br/>
                                        @Global.Main_Offers_Price: @price
                                        <br/>
                                    </p>
                                }
                            }
                        </td>
                    </tr>
                }
            </tbody>
        </table>
</div>

<script type="text/javascript">    

    var markers = @(Html.Raw((Json.Encode(Model.Connection.MapMarkers))));
    var stationTags = @(Html.Raw((Json.Encode(Model.Connection.StationTags))));
    var trainTags = @(Html.Raw((Json.Encode(Model.Connection.TrainTags))));
    var stationsLegend = $('#stationsLegend');
    var trainsLegend = $('#trainsLegend');
    // center: [centerY, centerX], TERRAIN, SATELITE, ROADMAP
    // {action:'clear', name:'polyline', tag:'someId'}
    var i = 0;
    
    function MapApiLoaded() {
        $.getScript("/Scripts/gmap3.min.js", function() {
            for(i = 0; i < stationTags.length; i++) {
                stationsLegend.append('<input id="chkSt' + i + '" type="checkbox" checked><label for="chkSt' + i + '">' + stationTags[i] + '</label><br />');
            }
            for(i = 0; i < trainTags.length; i++) {
                trainsLegend.append('<input id="chkTr' + i + '" type="checkbox" checked><label for="chkTr' + i + '">' + trainTags[i] + '</label><br />');
            }
        
            $('#map').gmap3(
                {
                    action: 'init',
                    options: {
                        zoom: 7,
                        mapTypeId: window.google.maps.MapTypeId.TERRAIN,
                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: window.google.maps.MapTypeControlStyle.DROPDOWN_MENU
                        },
                        navigationControl: true,
                        scrollwheel: true,
                        streetViewControl: true
                    }
                },
                {
                    action: 'addMarkers',
                    markers: markers,
                    marker: {
                        options: {
                            draggable: false
                        },
                        events: {
                            mouseover: function (marker, event, data) {
                                var map = $(this).gmap3('get'),
                                infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
                                if (infowindow) {
                                    infowindow.open(map, marker);
                                    infowindow.setContent(data);
                                } else {
                                    $(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: data} });
                                }
                            },
                            mouseout: function () {
                                var infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
                                if (infowindow) {
                                    infowindow.close();
                                }
                            }
                        }
                    }
                },
                {
                    action: "autofit"
                }
            @foreach (var line in Model.Connection.MapLines)
            {
                    <text>
                    ,
                     {
                        action: 'addPolyline',
                            options: {
                                strokeColor: "@(line.options.strokeColor)",
                                strokeOpacity: "@(line.options.strokeOpacity)",
                                strokeWeight: "@(line.options.strokeWeight)"
                            },
                            path: [
                                        @foreach (var pathPoint in line.path)
                                        {
                                            <text>
                                                [@(pathPoint.lat.ToString().Replace(",", ".")), @(pathPoint.lng.ToString().Replace(",", "."))]
                                                @if (pathPoint != line.path.Last())
                                                {
                                                    <text>,</text>
                                                }
                                            </text>
                                        }
                            ] 
                    }
                    </text>
            }
            );
        
            $('input', stationsLegend).change(function() {
                var region = $('label[for=' + $(this).attr('id') + ']', stationsLegend).html();
                var checked = $(this).is(':checked');
                var map = $('#map').gmap3('get');
                var markersStations = $('#map').gmap3({
                    action: 'get',
                    name: 'marker',
                    all: true,
                    tag: region
                });
                $.each(markersStations, function(j, marker){
                    marker.setMap( checked ? map : null);
                });
            });
        
            $('input', trainsLegend).change(function() {
                var region = $('label[for=' + $(this).attr('id') + ']', trainsLegend).html();
                var checked = $(this).is(':checked');
                var map = $('#map').gmap3('get');
                var trainsStations = $('#map').gmap3({
                    action: 'get',
                    name: 'polyline',
                    all: true,
                    tag: region
                });
                $.each(trainsStations, function(j, marker){
                    marker.setMap( checked ? map : null);
                });
            });
            
        });
    }

    $(document).ready(function () {
        var pricesTable = $('#pricesTable').dataTable({
            "bJQueryUI": true,
            "bFilter": false,
            "bSort": false,
            "bPaginate": false,
            "bInfo": false,
            "bStateSave": true,
            "oLanguage": {
                "sProcessing": "@Global.DataTable_sProcessing",
                "sLengthMenu": "@Global.DataTable_sLengthMenu",
                "sZeroRecords": "@Global.DataTable_sZeroRecords",
                "sInfo": "@Global.DataTable_sInfo",
                "sInfoEmpty": "@Global.DataTable_sInfoEmpty",
                "sInfoFiltered": "@Global.DataTable_sInfoFiltered",
                "sInfoPostFix": "@Global.DataTable_sInfoPostFix",
                "sSearch": "@Global.DataTable_sSearch",
                "sUrl": "@Global.DataTable_sUrl",
                "oPaginate": {
                    "sFirst": "@Global.DataTable_oPaginate_sFirst",
                    "sPrevious": "@Global.DataTable_oPaginate_sPrevious",
                    "sNext": "@Global.DataTable_oPaginate_sNext",
                    "sLast": "@Global.DataTable_oPaginate_sLast"
                }
            }
        });
        
        $('div .dataTables_wrapper div').each(function (i) {
            $(this).removeClass("ui-widget-header");
        });

        $('table tbody tr').each(function (i) {
            $(this).removeClass("ui-state-highlight");
        });
        
        $.getScript("http://maps.google.com/maps/api/js?sensor=false&async=2&callback=MapApiLoaded", function () { });
    });
</script>
                    
@*48.196752
16.337256*@